<template>
	<view class="order">
		<!-- <view v-if="hasLogin"> -->
		<!-- 导航 -->
		<u-navbar :back-text="titleName" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- <u-navbar back-icon-color="#000000" :title="titleName" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<mescroll-body top="0" :down="downOption" :up="upOption" :height="comHeight" ref="mescrollRef" @init="mescrollInit" @down="downCallback">
			<view style="">
				<view v-if="list.length > 0" style="width: 95%;margin: auto;"><image style="width: 100%;height: 170rpx;" src="../../static/gx_img/sj_list.png"></image></view>

				<!-- 商家列表 -->
				<view class="unit" v-for="(ites, indes) in list" :key="indes" @click="shopDetail(ites)">
					<view style="width: 100%;margin: auto;display: flex;">
						<view style="width:23% ;"><image class="" style="width: 146rpx;height: 132rpx;" :src="ites.portrait" mode="aspectFill"></image></view>
						<view style="width:77%;">
							<view style="color: #3F3F3F;font-size: 30rpx;font-weight: 800;">{{ ites.name }}</view>
							<view style="display: flex;align-items: center;margin: 10rpx 0rpx;">
								<view style="color: #F29423;font-size: 26rpx;text-align: left;">{{ ites.score }}分</view>
								<image style="width:28rpx ;height: 26rpx;margin: 0rpx 10rpx 0rpx 20rpx;" src="../../static/gx_img/sjlist_2.png"></image>
								<view style="color: #000000;font-size: 26rpx;">已服务{{ ites.serviceTimes || '0' }}次</view>
							</view>
							<view style="display: flex;width: 100%;justify-content: space-between;">
								<view style="display: flex;font-size: 20rpx;width: 264rpx;border-radius: 10rpx;border: 1rpx solid #FF4B34;">
									<view style="text-align: center; width: 180rpx;height: 40rpx;background: #FF4B34;color: white;font-size: 20rpx;line-height: 40rpx;">
										百亿补贴家电清洗季
									</view>
									<view style="width: 84rpx;height: 40rpx;color:#FF3D00 ;text-align: center;line-height: 40rpx;">领券</view>
								</view>
								<view style="color:#989898;font-size: 26rpx;">{{ ites.region }}</view>
							</view>
						</view>
					</view>
					<view v-for="(itt, ind) in ites.packageBisPageVOS" :key="ind">
						<view class="unit2">
							<view class="sales" :class="ind > 0 ? 'sa_bottoms' : ''" style="">
								<view style="display: flex;width: 100%;">
									<image src="../../static/icon/nears.png" mode="" style="width: 26rpx;height: 26rpx;margin-top: 10rpx;"></image>
									<view style="width: 100%;margin: auto;">
										<view class="hour" style="padding-left: 32rpx;">
											<view style="color: #F29423;font-size: 32rpx;font-weight: bold;">￥{{ itt.unitPrice }}</view>
											<view
												style="font-size: 30rpx;color: #9393AA;margin-left: 40rpx;overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;width: 400rpx;color: #000000;"
											>
												{{ itt.name }}
											</view>
											<!-- <view class="tao">套餐</view> -->
										</view>

										<view class="money">
											<view class="sale" style="padding-left: 12rpx;">
												<view class="prices">门市价：</view>
												<view class="prices">￥{{ itt.showPrice }}</view>
											</view>
											<view class="over" style="text-align: right;">已售{{ itt.totalSale }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="width: 100%;height:10rpx ; background-color: #F8F8F8;"></view>
				</view>
				<view style="margin-top: 50rpx;" v-if="list.length > 0">
					<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{ prompt }}</u-divider>
				</view>

				<view v-if="list.length == 0" style="margin-top: 100rpx;text-align: center;">
					<image src="../../static/img/1-35.png" style="width: 450rpx;height: 450rpx;"></image>
					<view class="typeface1">暂无数据</view>
				</view>
			</view>
		</mescroll-body>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
var that;
export default {
	components: {},
	data() {
		return {
			background: {
				backgroundColor: '#fca800'
			},

			count: 5,
			list: [],
			id: '',
			titleName: '商家列表', //标题名
			pageSize: 10,
			page: 1,
			prompt: '没有更多了',
			downOption: {
				use: true,
				auto: false,
				offset: 40
			},
			upOption: {
				use: false
			},
			mescroll: null,
			comHeight: 0,
			optionForm:{
				chargeType:0,
				businessId:0,
				titleName:'',
			}
		};
	},
	onLoad(option) {
		that = this;
		var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const { top, width, height, right } = menuButtonInfo;
		uni.getSystemInfo({
			success: res => {
				const { statusBarHeight } = res;
				const margin = top - statusBarHeight;
				var navHeight = height + statusBarHeight + margin * 4;
				that.comHeight = res.windowHeight - navHeight + 'px';
				console.log(that.comHeight);
			}
		});
		that.id = option.id;
		that.titleName = option.name;
		if(option.id){
			that.optionForm.chargeType=option.chargeType;
			that.optionForm.businessId=option.businessId;
			that.optionForm.titleName=option.titleName;
		}
		that.shangjiaList(that.id);
	},
	onReachBottom() {
		that.page += 1;
		that.shangjiaList(that.id);
	},
	methods: {
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		// 下拉刷新回调函数

		downCallback() {
			console.log('下拉刷新');
			setTimeout(() => {
				(that.page = 1), (that.list = []);
				that.prompt = '加载中....';
				that.shangjiaList(that.id);
				that.mescroll.endSuccess();
			}, 500);
		},

		// 获取商家列表
		shangjiaList(id) {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'coupon/ent/page'
			};
			let data = {
				page: that.page,
				activityId: id,
				pageSize: 15
			};
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				console.log(res);
				if (res.code == '200') {
					if (res.data.records.length > 0) {
						if (that.page == 1) {
							that.list = res.data.records;
						} else {
							that.list = that.list.concat(res.data.records);
							this.prompt = '加载中....';
						}
					} else if (that.list.length > 0 && res.data.records.length == 0) {
						this.prompt = '没有更多了....';
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},

		showTab() {
			var _this = this;
			_this.show = !_this.show;
		},
		//跳转商家详情
		shopDetail(item) {
			console.log('/pageageA/service/online_order2?enterpriseId=' +item.enterpriseId +'&chargeType=' +this.optionForm.chargeType +'&businessId=' +this.optionForm.businessId +'&supId=0' +'&titleName=' +this.optionForm.titleName +'&name=' +item.name)
			uni.navigateTo({
				url: '/pageageA/service/online_order2?enterpriseId=' +item.enterpriseId +'&chargeType=' +this.optionForm.chargeType +'&businessId=' +this.optionForm.businessId +'&supId=0' +'&titleName=' +this.optionForm.titleName +'&name=' +item.name
			});
			// uni.navigateTo({
			// 	url: '/pageageA/home/shopDetails/shopDetails?enterpriseId=' + enterpriseId
			// });
		}
	}
};
</script>

<style scoped lang="scss">
/* 未登录状态 */

.typeface1 {
	margin-top: 10rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #666666;
	opacity: 1;
}
.unit {
	padding: 28rpx 0rpx 0rpx 0rpx;
	width: 92%;
	margin: auto;
}

.unit1 {
	display: flex;
	padding-bottom: 24rpx;
	border-bottom: 1px solid #e8e8f6;
}

.unit1 .img {
	width: 122rpx;
	height: 122rpx;
	background: #e4e4e4;
	opacity: 1;
}

.unit1 .shop {
	margin-left: 18rpx;
}

.shop .all {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.shop .all .nam {
	font-size: 30rpx;
	color: #3f3f3f;
	font-weight: 500;
}

.shop .all .year {
	width: 160rpx;
	height: 36rpx;
	background: #fff2d9;
	border: 1px solid #f29423;
	opacity: 1;
	border-radius: 10rpx 0px 10rpx 0px;
	font-size: 22rpx;
	color: #f29423;
	text-align: center;
}

.bott {
	display: flex;
	justify-content: space-between;
	color: #9393aa;
	font-size: 26rpx;
	margin-top: 14rpx;
}

.service {
	display: flex;
	align-items: center;
}

.service image {
	width: 29rpx;
	height: 27rpx;
}

.service view {
	padding-left: 18rpx;
}

.unit2 {
	// padding: 10rpx 0rpx;
	// display: flex;
}

.unit2 .white {
	width: 122rpx;
}

.sales {
	padding: 26rpx 0 20rpx 0rpx;
}

.hour {
	font-size: 26rpx;
	color: #9393aa;
	display: flex;
	align-items: center;
}

.hour .tao {
	color: #f29423;
	font-size: 20rpx;
	border: 1px solid #f29423;
	text-align: center;
	margin-left: 16rpx;
	padding: 0 8rpx;
	height: 28rpx;
	line-height: 26rpx;
}

.money {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 4rpx;
}

.money .sale {
	display: flex;
	font-size: 26rpx;
}

.sale .price {
	color: #f29423;
}

.sale .prices {
	// text-decoration: line-through;
	font-size: 20rpx;
	color: #ceced1;
	// margin-left: 12rpx;
}

.over {
	color: #989898;
	font-size: 26rpx;
}
.sa_bottoms {
	border-top: 2rpx solid #e8e8f6;
}
</style>
